<template>
  <div class="main">
    <div class="left">
      <!-- <div>{{tableData}}</div> -->

      <el-form ref="form" :model="tableData" label-width="150px">
        <el-form-item
          style="margin-bottom: -1px"
          v-for="(item, index) in datakeys"
          :label="item"
          :key="index"
        >
          <el-link
            v-show="!keyflag[index]"
            :underline="false"
            type="primary"
            @dblclick.native="clickRow(index)"
            >{{ '"' + tableData[item] + '"' }}</el-link
          >
          <el-input
            @blur.native.capture="clickRow(index)"
            v-model="tableData[item]"
            v-show="keyflag[index]"
          ></el-input>
        </el-form-item>
        <div
          class="labStyle"
          @click="isHidden()"
          v-show="this.labsData != undefined"
        >
          Labs <span>Array</span>
        </div>
        <div style="display: flex">
          <i
            class="el-icon-arrow-up"
            v-show="this.flag === 1"
            @click="isHidden()"
            style="margin-left: 109px"
          ></i>
          <div v-show="this.flag === 1">
            <div v-for="(val, index) in labsData" :key="index" :label="val">
              <labsList
                :val="val"
                :index="index"
                :labsData="labsData"
              ></labsList>
            </div>
          </div>
        </div>
      </el-form>
    </div>

    <div class="right">
      <!-- <i class="el-icon-delete"></i>
      <el-link type="primary" @click="updata()" v-show="this.val.id != 205"
        >提交</el-link
      > -->
      <el-button
        class="r_btn"
        type="primary"
        @click="updata()"
        v-show="this.val.dataType === 'C'"
        icon="el-icon-folder-checked"
        plain
        >提交</el-button
      >
    </div>
  </div>
</template>

<script>
import labsList from "./labs.vue";
import { updataDataLabs } from "@/api/burnPower/interface";
export default {
  name: "cardList",
  data() {
    return {
      flag: 0,
      show: 0,
      ArrLabs: [],
      datakeys: [],
      labsData: [],
      keyflag: [], // 标记选择的是哪一行
    };
  },
  props: ["tableData", "dtIdx", "val"],
  components: {
    labsList,
  },
  mounted() {
    console.log(this.val === {}, "val", this.val);
    this.getKeys();

    this.getLabs();
    this.delLabs();
  },

  methods: {
    //获取焦点
    getFocus() {
      console.log("执行");
    },
    //labs隐藏显示
    isHidden() {
      this.flag;
      if (this.flag === 0) {
        this.flag = 1;
      } else {
        this.flag = 0;
        this.show = 0;
      }
      console.log(this.flag);
    },
    //content隐藏显示
    isShow() {
      this.show;
      if (this.show === 0) {
        this.show = 1;
      } else {
        this.show = 0;
      }
    },
    // 取字段名
    getKeys() {
      let _this = this;
      this.$nextTick(() => {
        _this.datakeys = Object.keys(_this.tableData);
        for (let i = 0; i < _this.datakeys.length; i++) {
          _this.keyflag.push(false);
        }
      });
    },
    // 点击某一行
    clickRow(idx) {
      this.$set(this.keyflag, idx, !this.keyflag[idx] && true);
      console.log(this.tableData);
    },
    //树形结构
    handleNodeClick(data) {
      console.log(data);
    },
    //获取labs
    getLabs() {
      let ArrLabs = Array.of(this.tableData).map((item, index) => {
        return Object.assign({}, { labs: item.labs });
      });
      this.labsData = ArrLabs[0].labs;

      if (this.labsData != undefined) {
        this.labsData = JSON.parse(this.labsData);
      }
    },
    //删除labs
    delLabs() {
      this.$delete(this.tableData, "labs");
    },
    //提交
    updata() {
      let columns = JSON.stringify(this.tableData);
      let labs = JSON.stringify(this.labsData);
      let tbName = this.val.tableName;
      console.log(columns, labs, tbName);
      this.$message.warning("提交中");
      updataDataLabs(columns, labs, tbName)
        .then(() => {
          this.$message.success("提交成功");
        })
        .catch(() => {
          this.$message.error("提交失败");
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.main {
  background-color: #fff;
  min-width: 1152px;
  margin-right: 24px;
  min-height: 150px;
  display: flex;
  padding: 15px 20px;
  margin-bottom: 10px;
  .left {
    width: 800px;
    flex-grow: 1;
    overflow: auto;
    ::v-deep .el-form {
      &-item {
        height: 25px;
        line-height: 25px !important;
        margin-bottom: 5px;
        &__content {
          height: 25px;
          line-height: 25px;
        }
        .el-link {
          display: block;
          min-width: 650px;
          overflow-x: hidden;
          overflow-y: auto;
          white-space: nowrap;
          -o-text-overflow: ellipsis;
          text-overflow: ellipsis;
          font-size: 14px;
          font-family: Alibaba PuHuiTi-Bold, Alibaba PuHuiTi;
          font-weight: bold;
          color: #4353e4;
          .el-form {
            overflow-y: auto;
            overflow-x: hidden;
          }
        }
      }
      .el-input {
        height: 25px;
        line-height: 25px;
        display: block;
        width: 650px;
        &__inner {
          height: 23px !important;
          line-height: 23px;
        }
      }
      &-item__label {
        height: 23px;
        font-size: 14px;
        font-family: Alibaba PuHuiTi-Bold, Alibaba PuHuiTi;
        font-weight: bold;
        color: #333333;
        // color:red;
        line-height: 23px;
      }
      &-item__content {
        min-height: 25px !important;
      }
    }
  }
  .right {
    flex-grow: 2;
    text-align: right;
    .r_btn {
      // border: 1px ridge red;
      margin-top: 2%;
      margin-right: 2%;
    }
  }
}
.isHidden {
  display: none;
}
::-webkit-scrollbar {
  width: 50px;
}
.labStyle {
  margin-left: 107px;
  height: 23px;
  font-size: 14px;
  font-family: Alibaba PuHuiTi-Bold, Alibaba PuHuiTi;
  font-weight: bold;
  color: #333333;
  line-height: 23px;
  & span {
    margin-left: 14px;
    font-size: 14px;
    font-family: Alibaba PuHuiTi-Bold, Alibaba PuHuiTi;
    font-weight: bold;
    color: #4353e4;
  }
}
</style>
